<template>
    <svg
        class="icon-font icon"
        aria-hidden="true"
        :style="customStyle"
        @click="onClick"
        @mouseover="mouseover"
        @mouseout="mouseout"
    >
        <use :xlink:href="'#icon-' + name"></use>
    </svg>
</template>

<script setup>
    const props = defineProps({
        name: {
            type: String,
            default: '',
        },
        customStyle: {
            type: String,
            default: '',
        },
        onClick: {
            type: Function,
            default: () => {},
        },
    })

    function mouseover() {}

    function mouseout() {}
</script>

<style lang="less" scoped>
    .icon {
        width: 25px;
        height: 25px;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        color: #606266;
    }
</style>
